*{
    margin:0;
    padding: 0;
    box-sizing:border-box;
  }
  *::after{
    box-sizing:border-box;
  }
  *::before{
    box-sizing:border-box;
  }
body{
display: flex;
flex-direction:column;
height: 100vh;
}
.code-wrapper{
flex:1;
height: 50%;
padding: 10px;
}
.preview-wrapper{
flex:1;
height: 50%;
}

#code{
overflow: hidden;
height:100%;
}

.actions{
  position: absolute;
  right: 0;
  top:0;
  display: flex;
  flex-direction: column;
}
.actions>button{
  margin: 10px;
  background-color: #ddd;
  padding: 8px 10px;
  border: none;
}
.actions>button.active{
  box-shadow: 1px 1px 1px rgba(0, 0, 0 , 0.8);
}
.actions>button:focus{
  outline: none;
}